<template>
  <div class="login">
    <van-row class="title">
      <van-col span="24">登陆您的小宇宙</van-col>
    </van-row>

    <!-- 上框线 -->
    <van-row style="margin-top: 90px">
      <van-col offset="4" span="16">
        <div class="conver-size left-top"></div>
        <div class="conver-size right-top"></div>
      </van-col>
    </van-row>
    <!-- 上框线 结束 -->

    <!-- 输入框 -->
    <van-row style="margin-top: 40px;">
      <van-col offset="6" span="12" >
        <input v-model="form.username" placeholder="请输入 您的手机号码" style="width:90%"/>
      </van-col>
      <van-col offset="6" span="12" class="margin-t-20">
        <input type="password" v-model="form.password" placeholder="请输入 您的令牌 / 密码" style="width:90%"/>
      </van-col>
      <van-col offset="6" span="12" class="font-size-10 color-gray margin-t-5">
        新晋小伙伴，请联系您的邀请人获取令牌！
      </van-col>
    </van-row>
    <!-- 输入框 结束 -->

    <!-- 下框线 -->
    <van-row style="margin-top: 40px;">
      <van-col offset="4" span="16">
        <div class="conver-size left-bottom"></div>
        <div class="conver-size right-bottom"></div>
      </van-col>
    </van-row>
    <!-- 下框线 结束 -->

    <!-- 登录按钮 -->
    <van-row style="margin-top: 40px;">
      <van-col span="24" style="text-align: center;">
        <i class="iconfont iconjinru color-white font-size-30"  @click="loginHandler"></i>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  components: {
  },
  data () {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  mounted () {

  },
  methods: {
    loginHandler () {
      if (this.validateOK()) {
        const loginToast = Toast.loading({ message: '登录中', loadingType: 'spinner', duration: 0 })
        this.$store.dispatch('LOGIN', this.form).then(() => {
          loginToast.clear()
          this.$router.push({ path: '/' })
        })
      }
    },
    validateOK () {
      if (!this.form.username) {
        Toast.fail('请填写手机号')
        return false
      }
      if (!this.$util.validatePhoneNum(this.form.username)) {
        Toast.fail('手机号\n格式错误')
        return false
      }
      if (!this.form.password) {
        Toast.fail('请填写\n令牌 / 密码')
        return false
      }
      return true
    }
  }
}
</script>

<style scoped>
.login {
  position: fixed;
  background: url('../assets/image/login-bg-2.jpg') no-repeat;
  background-size: cover;
  background-color: #000;
  width: 100%;
  height: 100%;
  color: #FFF;
  background-position: center 0;
}
.title {
  margin-top: 70px;
  text-align: center;
  font-size: 20px;
}
input {
  background-color: #000000;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: #737373 solid 1px;
  padding: 5px;
  color: #FFF;
  font-size: 16px;
}
input::placeholder {
  font-size: 12px;
  color: #B0B0B0;
}
.conver-size {
  width: 30px;
  height: 30px;
}
.left-top {
  border-left: #FFF solid 3px;
  border-top: #FFF solid 3px;
  float: left;
}
.right-top {
  border-right: #FFF solid 3px;
  border-top: #FFF solid 3px;
  float: right;
}
.left-bottom {
  border-left: #FFF solid 3px;
  border-bottom: #FFF solid 3px;
  float: left;
}
.right-bottom {
  border-right: #FFF solid 3px;
  border-bottom: #FFF solid 3px;
  float: right;
}
</style>
